<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习 - 点赞</title>
  <style>

    html, body {
      height: 100%;
    }

    body {
      padding: 0;
      margin: 0;
      position: relative;
    }

    .box {
      position: fixed;
      right: 0;
      bottom: 0;

      width: 40px;
      height: 600px;
      /* background-color: pink; */
    }

    .bubble {
      position: absolute;
      bottom: 10px;
      right: 40px;

      width: 40px;
      height: 40px;
      border-radius: 50%;
      opacity: 0;

      animation: float 2s linear infinite;
    }

    .bubble:first-child {
      background-color: blue;
    }

    .bubble:nth-child(2) {
      background-color: green;
      animation-delay: 0.2s;
    }

    .bubble:nth-child(3) {
      background-color: orange;
      animation-delay: 0.4s;
    }

    .bubble:nth-child(4) {
      background-color: red;
      animation-delay: 0.6s;
    }

    .bubble:nth-child(5) {
      background-color: yellow;
      animation-delay: 0.8s;
    }

    .bubble:nth-child(6) {
      background-color: blue;
    }

    .bubble:nth-child(7) {
      background-color: pink;
      animation-delay: 1s;
    }

    .bubble:nth-child(8) {
      background-color: red;
      animation-delay: 1.2s;
    }

    .bubble:nth-child(9) {
      background-color: orange;
      animation-delay: 1.4s;
    }

    .bubble:nth-child(9) {
      background-color: red;
      animation-delay: 1.6s;
    }

    @keyframes demo {
      from {
        transform: translateY(0px) scale(0);
      }

      40% {
        left: -5px;
      }

      60% {
        left: 0px;
      }

      70% {
        left: 8px;
      }

      80% {
        left: 0;
      }

      to {
        transform: translateY(-600px) scale(1.2);
        opacity: 1;
      }
    }

    @keyframes float {
      0% {
        opacity: 1;
        transform: scale(0.3) translate(0);
      }

      8% {
        transform: scale(0.6) translate(-6px, -33px);
      }

      16% {
        transform: scale(0.9) translate(6px, -66px);
      }

      25% {
        transform: scale(1) translate(-8px, -100px);
      }

      50% {
        transform: scale(1) translate(8px, -200px);
      }

      75% {
        transform: scale(1) translate(-12px, -300px);
        opacity: 1;
      }

      100% {
        opacity: 0;
        transform: scale(1) translate(12px, -400px);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
  </div>
</body>
</html>